<template>

    <van-nav-bar
        :title="title"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    >
        <template #right>
            <van-icon name="search" size="18"/>
        </template>
    </van-nav-bar>

    <div id="content">
        <router-view/>
    </div>


    <van-tabbar route v-model="active" @change="onChange">
        <van-tabbar-item replace to="/" name="Index" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="/chat"  name="chat" icon="chat-o" >消息</van-tabbar-item>
        <van-tabbar-item replace to="/team" name="Team" icon="search">队伍</van-tabbar-item>
        <van-tabbar-item replace to="/user" name="User" icon="friends-o">个人</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import {ref} from 'vue';
import {showToast, Toast} from 'vant';
import {useRouter} from "vue-router";
import routes from "../config/router";



const router = useRouter();
const DEFAULT_TITLE = '校园搭子';
const title = ref(DEFAULT_TITLE);
const active = ref("Home");

const onClickLeft = () => history.back();

/**
 * 根据路由切换标题
 */
router.beforeEach((to, from) => {
    const toPath = to.path;
    const route = routes.find((route) => {
        return toPath == route.path;
    })
    title.value = route?.title ?? DEFAULT_TITLE;
})


const onClickRight = () => {
    router.push('/search')
};
</script>

<style scoped>
#content{
    padding-bottom: 60px;
}
</style>